<template>
  <div>
    <ul>
      <li v-for="item in resultList" :key="item.id">
        <img :src="item.picUrl" />
        <span>{{ item.name }}</span>
        <span>{{ getSinger(item.artists) }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
import { searchAPI } from "@/api";
export default {
  name: "AlbumRes",
  data() {
    return {
      resultList: [],
    };
  },
  methods: {
    async getResult() {
      const res = await searchAPI({
        keywords: this.keywords,
        type: 10,
        limit: 100,
      });
      this.resultList = res.data.result.albums;
    },
    getSinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, -1);
    },
  },
  computed: {
    keywords() {
      return this.$store.state.search.searchWord;
    },
  },

  created() {
    this.getResult();
  },
};
</script>

<style lang="less" scoped>
ul {
  li {
    height: 80px;
    padding-left: 20px;
    line-height: 80px;
    font-size: 16px;
    display: flex;
    position: relative;
    cursor: pointer;
    img {
      width: 60px;
      height: 60px;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 4px;
    }
    span {
      display: block;
      margin-left: 10px;
      width: 240px;
      word-wrap: break-word; /*强制换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*隐藏后添加省略号*/
      white-space: nowrap; /*强制不换行*/
    }
    span:nth-child(3) {
      position: absolute;
      left: 350px;
      font-size: 13px;
      color: #999;
      top: 0px;
    }
  }
  li:nth-child(2n) {
    background-color: rgb(249, 249, 249);
  }
  li:hover {
    background-color: rgb(240, 241, 242);
  }
}
</style>